<template>
    <div class="user-info-card">
        <div v-if="itemStyle == 0">
            <div class="user-info">
            <div class="avatar-body">
                <img :src="avatarConfig ? avatarConfig : require('../../assets/images/20250715161614.png')" alt="用户头像">
                <div class="san-jiao" :style="{ backgroundColor: activeColor}"></div>
            </div>
            <div class="content" :style="{ backgroundColor: activeColor, color: fontColor }">
                <ul class="user-info-content-base">
                    <li v-if="nameShow">
                        <p class="user-name" :style="{  color: fontColor }">{{ nameConfig }}</p>
                        <p class="user-note" :style="{color: fontColor }">{{ nameEn }}</p>
                    </li>
                    <li v-if="careerShow">
                        <p class="user-career" :style="{ color: fontColor }">{{ career }}</p>
                        <p class="user-note" :style="{ color: fontColor }">{{ company }}</p>
                    </li>
                </ul>
                <div class="phone-poster flex-text" v-if="phoneShow">
                    <div :style="{ color: fontColor }"><i class="el-icon-phone-outline left-4"></i>{{ phone }}</div>
                    <div :style="{ color: fontColor }">海报<img src="../../assets/images/二维码.png" class="code-img" alt="二维码"></div>
                </div>
                <div class="phone-poster flex-text" v-if="emailShow">
                    <div :style="{ color: fontColor }"><i class="el-icon-message left-4"></i>{{ email }}</div>
                </div>
                <div class="phone-poster flex-text" v-if="addressShow">
                    <div :style="{  color: fontColor }"><i class="el-icon-location-outline left-4"></i>{{ address }}</div>
                </div>
            </div>
        </div>
        </div>
        <div v-if="itemStyle == 1">
            <div class="user-info">
                <div class="item-style-1">
                    <div class="item-style-1-l">
                        <p>JXH-新华</p>
                        <p>UI设计师</p>
                        <div class="phone-poster flex-text" v-if="phoneShow">
                            <div :style="{ color: fontColor }"><i class="el-icon-phone-outline left-4"></i>138********</div>
                            <div :style="{ color: fontColor }">海报<img src="../../assets/images/二维码.png" class="code-img" alt="二维码"></div>
                        </div>
                        <div class="phone-poster flex-text" v-if="emailShow">
                            <div :style="{ color: fontColor }"><i class="el-icon-message left-4"></i>523842210@qq.com</div>
                        </div>
                        <div class="phone-poster flex-text" v-if="addressShow">
                            <div :style="{  color: fontColor }"><i class="el-icon-location-outline left-4"></i>XX市XX区XX路XX号XXXX小区X栋XX号</div>
                        </div>
                    </div>
                    <div  class="item-style-1-r">
                        <img src="../../assets/images/20250715161614.png" alt="用户头像">
                        <div class="san-jiao" :style="{ backgroundColor: activeColor}"></div>
                    </div>
                </div>
                <!-- <div class="content" :style="{ backgroundColor: activeColor, color: fontColor }">
                    <ul class="user-info-content-base">
                        <li v-if="nameShow">
                            <p class="user-name" :style="{  color: fontColor }">JXH-新华</p>
                            <p class="user-note" :style="{color: fontColor }">jiangxinhua</p>
                        </li>
                        <li v-if="careerShow">
                            <p class="user-career" :style="{ color: fontColor }">UI设计师</p>
                            <p class="user-note" :style="{ color: fontColor }">深圳市XXX科技有限公司</p>
                        </li>
                    </ul>
                    <div class="phone-poster flex-text" v-if="phoneShow">
                        <div :style="{ color: fontColor }"><i class="el-icon-phone-outline left-4"></i>138********</div>
                        <div :style="{ color: fontColor }">海报<img src="../../assets/images/二维码.png" class="code-img" alt="二维码"></div>
                    </div>
                    <div class="phone-poster flex-text" v-if="emailShow">
                        <div :style="{ color: fontColor }"><i class="el-icon-message left-4"></i>523842210@qq.com</div>
                    </div>
                    <div class="phone-poster flex-text" v-if="addressShow">
                        <div :style="{  color: fontColor }"><i class="el-icon-location-outline left-4"></i>XX市XX区XX路XX号XXXX小区X栋XX号</div>
                    </div>
                </div> -->
                <!-- <img src="../../assets/images/20250715161614.png" alt="用户头像"> -->
            </div>
        </div>
        <div v-if="itemStyle == 2">
            2
        </div>
        <div v-if="itemStyle == 3">
            3
        </div>
    </div>
</template>

<script>
import address from '@/utils/address'
import { mapState } from 'vuex'
export default {
    name: 'use_card',
    cname: '用户卡片',
    configName: 'c_use_card',
    icon: 'iconleijiyonghu',
    type: 3,
    defaultName: 'cardHeader',
    props: {
        index: { type: null },
        num: { type: null }
    },
    computed: {
        ...mapState('mobildConfig', ['defaultArray'])
    },
    watch: {
        pageData: {
            handler(nVal) {
                this.setConfig(nVal)
            },
            deep: true
        },
        num(nVal) {
            const data = this.defaultArray[nVal]
            this.setConfig(data)
        },
        'defaultArray': {
            handler() {
                const data = this.defaultArray[this.num]
                this.setConfig(data)
                
            },
            deep: true
        }
    },
    data() {
        return {
            defaultConfig: {
                name: 'cardHeader',
                timestamp: this.num,
                setUp: {
                    tabVal: '0'
                },
                // tabConfig: { // 恢复 tabConfig，确保结构完整
                //     title: '选择模板',
                //     tabVal: 0,
                //     type: 1,
                //     tabList: [
                //         { name: '自动选择', icon: 'iconzidongxuanze' },
                //         { name: '手动选择', icon: 'iconshoudongxuanze' }
                //     ]
                // },
                avatarConfig: {
                    title:"更换默认头像",
                    maxList: 1,
                    list: [
                        {
                            img: "",
                            info: [
                                {
                                    title: "头像名",
                                    value: "头像名",
                                    tips: "选填，不超过4个字",
                                    max: 4,
                                },
                                {
                                    title: "链接",
                                    value: "",
                                    tips: "请输入链接(选填)",
                                    max: 100,
                                },
                            ],
                        },
                    ],
                },
                nameConfig: {
                    title: '姓名',
                    value: 'JXH-新华',
                    place: '请输入姓名',
                },
                nameEn: {
                    title: '姓名英文',
                    value: 'jiangxinhua',
                    place: '请输入姓名英文',
                },
                career: {
                    title: '职业名',
                    value: 'UI设计师',
                    place: '请输入职业名',
                },
                company: {
                    title: '公司名',
                    value: '深圳市XXX科技有限公司',
                    place: '请输入公司',
                },
                phone: {
                    title: '电话',
                    value: '138********',
                    place: '请输入电话',
                },
                email: {
                    title: '邮箱',
                    value: '523842210@qq.com',
                    place: '请输入邮箱',
                },
                address: {
                    title: '地址',
                    value: 'XX市XX区XX路XX号XXXX小区X栋XX号',
                    place: '请输入地址',
                },
                // userCardStyle: {
                //     title: '卡片样式',
                //     type: 0,
                //     list: [
                //         {
                //             val: '1',
                //             style: '1',
                //             icon:''
                //         },
                //         {
                //             val: '2',
                //             style: '2'
                //         },
                //         {
                //             val: '3',
                //             style: '3'
                //         },
                //         {
                //             val: '4',
                //             style: '4'
                //         }
                //     ]
                // },
                numConfig: { val: 7 },
                themeColor: {
                    title: '背景颜色',
                    default: [{ item: '#3D8EF9' }], // 默认使用蓝色背景
                    color: [{ item: '#3D8EF9' }]
                },
                fontColor: {
                    title: '文字颜色',
                    default: [{ item: '#fff' }],
                    color: [{ item: '#fff' }]
                },
                labelColor: {
                    title: '活动标签',
                    default: [{ item: '#e93323' }],
                    color: [{ item: '#e93323' }]
                },
                itemStyle: {
                    title: '用户卡片',
                    name: 'itemSstyle',
                    type: 0,
                    list: [
                        {
                            val: '样式一',
                            icon: 'iconzuoyoutuwen'
                        },
                        {
                            val: '样式二',
                            icon: 'iconlianglie'
                        },
                        {
                            val: '样式三',
                            icon: 'iconsanlie'
                        },
                        {
                            val: '样式四',
                            icon: 'icondanlie'
                        }
                    ]
                },
                bgStyle: {
                    title: '背景样式',
                    type: 0,
                    list: [
                        { val: '直角', icon: 'iconPic_square' },
                        { val: '圆角', icon: 'iconPic_fillet' }
                    ]
                },
                conStyle: {
                    title: '内容样式',
                    type: 1,
                    list: [
                        { val: '直角', icon: 'iconPic_square' },
                        { val: '圆角', icon: 'iconPic_fillet' }
                    ]
                },
                mbConfig: { title: '页面间距', val: 0, min: 0 },
                productList: { title: '商品列表', list: [] },
                goodsList: { max: 20, list: [] }
            },
            navlist: [],
            imgStyle: '',
            txtColor: '',
            slider: 0,
            tabCur: 0,
            list: [],
            activeColor: '#3D8EF9',
            fontColor: '',
            labelColor: '#e93323',
            pageData: {},
            itemStyle: 0,
            nameShow: true,
            careerShow: true,
            phoneShow: true,
            emailShow: true,
            addressShow: true,
            bgStyle: 0,
            conStyle: 1,
            avatarConfig: "",
            nameConfig: "JXH-新华",
            nameEn: "jiangxinhua",
            career: "UI设计师",
            company: "深圳市XXX科技有限公司",
            phone: "138********",
            email: "523842210@qq.com",
            address: "XX市XX区XX路XX号XXXX小区X栋XX号",
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 使用默认配置兜底，确保 pageData 不为 undefined
            this.pageData = this.defaultArray[this.num] || this.defaultConfig
            this.setConfig(this.pageData)
        })
    },
    methods: {
        setConfig(data) {
            if (!data) return
            
            // 关键：初始化可能缺失的配置对象
            const setUp = data.setUp || { tabVal: '0' }
            const tabConfig = data.tabConfig || {
                tabVal: 0,
                tabList: []
            }
            
            // 使用可选链操作符和默认值，避免访问 undefined
            // let styleType = data.itemStyle.type
            // this.itemStyle = data.itemStyle.list[styleType].style || 0
            this.avatarConfig = data.avatarConfig && data.avatarConfig.list && data.avatarConfig.list[0] && data.avatarConfig.list[0].img ?  data.avatarConfig.list[0].img : ''
            this.itemStyle = data.itemStyle.type || 0;
            this.activeColor = data.themeColor.color[0].item || '#3D8EF9'
            this.fontColor = data.fontColor.color[0].item || '#fff'
            this.labelColor = data.labelColor.color[0].item || '#e93323'
            this.slider = data.mbConfig.val || 0
            this.nameConfig = data.nameConfig.value || "JXH-新华"
            this.nameEn = data.nameEn.value || "jiangxinhua"
            this.career = data.career.value || "UI设计师"
            this.company = data.company.value || "深圳市XXX科技有限公司"
            this.phone = data.phone.value || "138********"
            this.email = data.email.value || "523842210@qq.com"
            this.address = data.address.value || "XX市XX区XX路XX号XXXX小区X栋XX号"

            // this.nameShow = data.nameShow.val !== false
            // this.careerShow = data.careerShow.val !== false
            // this.phoneShow = data.phoneShow.val !== false
            // this.emailShow = data.emailShow.val !== false
            // this.addressShow = data.addressShow.val !== false
            
            this.bgStyle = data.bgStyle.type || 0
            this.conStyle = data.conStyle.type || 1
            
            // 安全访问嵌套属性
            this.list = tabConfig.tabVal 
                ? data.goodsList.list || [] 
                : data.productList.list || []
        }
    }
}
</script>

<style scoped lang="scss">
.user-info-card {
    padding: 0 10px;
    .avatar-body {
        position: relative;
        width: 100%;
        height: auto;
        .san-jiao {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;     /* 宽度始终等于父元素 */
            height: 30px;     /* 高度为父元素高度的50%，可按需调整 */
            clip-path: polygon(0 100%, 100% 100%, 0 0); /* 左下角三角形 */
        }
    }
    .user-info {
        width: 100%;
        img {
            width: 100%;
            object-fit: cover;
            vertical-align: middle;
        }
        .content {
            width: 100%;
            margin-top: -4px; // 修复图片与内容间的间隙
            .user-info-content-base {
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 0;
                li {
                    margin: 0;
                    padding: 8px 0;
                    flex: 1;
                    list-style: none;
                    position: relative;
                    .user-name, .user-career {
                        margin: 0;
                        padding: 0;
                        font-size: 24px;
                        text-align: center;
                        color: #fff;
                    }
                    .user-note {
                        font-size: 12px;
                        color: rgba(#ffffff, 0.8);
                        text-align: center;
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        top: 50%;
                        height: 80%;
                        width: 1px;
                        transform: translateY(-50%);
                        background: rgba(#ffffff, 0.3);
                    }
                    &:last-child::after {
                        display: none;
                    }
                }
            }
            .phone-poster {
                display: flex;
                justify-content: space-between;
            }
            .flex-text {
                padding: 0 24px 12px;
                color: #ffffff;
                font-size: 14px;
                .code-img {
                    width: 25px;
                    height: 25px;
                }
                .left-4 {
                    margin-right: 4px;
                }
            }
        }
    }
    .item-style-1 {
        display: flex;
        .item-style-1-l {
            width: 55%;
        }
        .item-style-1-r {
            width: 45%;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            // .san-jiao {

            // }
        }
    }
}
</style>